import {createApp, h, App, Component, ComponentInternalInstance} from 'vue';
import { ElDialog } from 'element-plus';

/**
 * 打开弹窗
 * @param context 上下文
 * @param component 要在弹窗中显示的组件
 * @param props 传递给组件的属性
 * @param dialogProps 传递给 ElDialog 的属性
 * @returns 关闭弹窗的函数
 */
export const openDialog = (
    context: ComponentInternalInstance,
    component: any,
    props: Record<string, any> = {},
    dialogProps: Record<string, any> = {}
): (() => void) => {
    // 创建一个 div 元素作为弹窗的挂载点
    const container = document.createElement('div');
    document.body.appendChild(container);
    let app: App<Element>;

    const close = () => {
        // 卸载应用并移除容器
        app.unmount();
        document.body.removeChild(container);
    };
    const rootApp = context.root
    // 创建一个包含 ElDialog 和目标组件的应用
    app = createApp({
        render() {
            return h(
                ElDialog,
                {
                    ...dialogProps,
                    modelValue: true,
                    'onUpdate:modelValue': (value: boolean) => {
                        if (!value) {
                            close();
                        }
                    },
                },
                {
                    default: () => h(component, props),
                }
            );
        },
    });
    if (context) {
        // 继承全局属性
        Object.assign(app.config.globalProperties, rootApp.appContext.app.config.globalProperties);
        // 继承局部注册组件
        if (context) {
            const localComponents = context.root.appContext.components;
            for (const [name, component] of Object.entries(localComponents)) {
                app.component(name, component as Component);
            }
        }
    }

    app.mount(container);

    // 返回关闭弹窗的函数
    return close;
};
